<!DOCTYPE html>
<html lang="en">

    <head>

        <meta charset="utf-8">
        <!---Read only section. Source panel edits to these document properties will not be persisted-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Call 3rd Party Web Service</title>
        <!---End read only section. Additional scripts or document properties can be added outside this section-->

        <link href="ni-webvi-resource-v0/favicon.ico" type="image/x-icon" rel="icon">
<link href="ni-webvi-resource-v0/Web/dist/Styles/niBase.DeployedRun.min.css" type="text/css" rel="stylesheet">
<script src="ni-webvi-resource-v0/BrowserDetection.js" type="text/javascript" nomodule=""></script>
<script src="ni-webvi-resource-v0/DeployedRun.min.js" type="module"></script>
<script src="ni-webvi-resource-v0/VireoImport.min.js" type="module"></script>
<script src="ni-webvi-resource-v0/ResourceLoadDetection.js" defer=""></script>
<style ni-autogenerated-style-id="">
		/* Read only section. Source panel edits to the content of this style tag will not be persisted */
        [ni-control-id='2'] { --ni-background: rgba(255,255,255,1); --ni-border-width: 0px 0px 0px 0px; height: 1300px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 30px 30px 30px 30px; width: 1000px; --ni-max-width: none; }
        .ni-front-panel-wrapper { min-width: 1000px; }
        [ni-control-id='3'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: auto; left: 2px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 29px; width: auto; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='4'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 200px; left: 2px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 49px; width: 996px; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='5'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(255,255,255,1); left: 57px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 58px; font-size: 64px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; width: 360px; height: 184px; }
        [ni-control-id='6'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 384px; left: 2px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 795px; width: 990px; font-size: 16px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-template-id='15'], [ni-control-id='15'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 24px; left: 0px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-end; --ni-text-align: right; top: 0px; width: 10px; font-size: 16px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-template-id='14'], [ni-control-id='14'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 21px; --ni-overflow-x: hidden; left: 0px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 0px; --ni-overflow-y: auto; width: 10px; font-size: 16px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-template-id='16'], [ni-control-id='16'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 24px; left: 0px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-end; --ni-text-align: right; top: 0px; width: 10px; font-size: 16px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-template-id='17'], [ni-control-id='17'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 24px; left: 0px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-end; --ni-text-align: right; top: 0px; width: 10px; font-size: 16px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-template-id='18'], [ni-control-id='18'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 24px; left: 0px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-end; --ni-text-align: right; top: 0px; width: 10px; font-size: 16px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='13'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: auto; left: 2px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 775px; width: auto; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='12'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 144px; left: 516px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 80px; width: 464px; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='20'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: auto; left: 516px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 60px; width: auto; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='19'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 408px; left: 2px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 310px; width: 408px; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='22'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: auto; left: 2px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 290px; width: auto; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='21'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: 36px; left: 340px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-end; --ni-text-align: right; top: 732px; width: 89px; font-size: 27px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='24'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: auto; left: 340px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 712px; width: auto; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='23'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(0,0,0,1); left: 116px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 732px; font-size: 29px; font-family: Lucida Sans Unicode, Lucida Grande, Lucida Sans, Geneva, Verdana, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; width: 208px; height: 36px; }
        [ni-control-id='25'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); left: 550px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 310px; font-size: 16px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; width: 396px; height: 280px; }
        [ni-control-id='26'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(0,173,239,1); height: 40px; left: 2px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; --ni-text-align-as-flex: flex-start; --ni-text-align: left; top: 260px; width: 920px; font-size: 21px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
        [ni-control-id='27'] { --ni-border-width: 0px 0px 0px 0px; --ni-foreground-color: rgba(43,48,51,1); height: auto; left: 2px; --ni-margin: 0px 0px 0px 0px; --ni-padding: 0px 0px 0px 0px; top: 240px; width: auto; font-size: 12px; font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif; font-style: normal; font-weight: normal; text-decoration: none; }
		/* End read only section. To add additional styles, add a new style tag after this one. */</style>
    
</head>

    <body><ni-web-application location="BROWSER" engine="VIREO" vireo-source="index.via.txt" wasm-url="ni-webvi-resource-v0/node_modules/vireo/dist/wasm32-unknown-emscripten/release/vireo.core.wasm"><ni-virtual-instrument vi-name="WebApp::index.gviweb"></ni-virtual-instrument></ni-web-application>
        <div id="ni-outdated-browser-message" style="display:none">This browser is missing features needed to run this web application. Open this web application in a supported browser.</div>
        <div id="ni-failed-to-load-vireo-source" style="display:none">Unable to load required dependencies. Please verify all WebVI files are available and served using an http server or use a browser that can load files directly from the filesystem.</div>

        <div class="ni-front-panel-wrapper" vi-ref="" ni-control-id="FrontPanelWrapper">
            <ni-front-panel control-resize-mode='fixed' layout='absolute' ni-control-id='2'>

                

                

                

                

                

                

                

                

                

                

                

                

                

                

                

            
            <ni-label class='ni-hidden' control-resize-mode='fixed' label-alignment='top-left' ni-control-id='3' text='banner'></ni-label>
            <ni-url-image alternate='' binding-info='{"accessMode": "writeOnly", "dataItem": "dataItem_Banner", "dco": 5, "isLatched": false, "prop": "source", "sync": false, "unplacedOrDisabled": true}' control-resize-mode='fixed' follower-ids='["3"]' href='' label-alignment='top-left' label-id='3' ni-control-id='4' read-only='true' source='data:image/svg+xml,%3C?xml%20version=%221.0%22%20encoding=%22UTF-8%22?%3E%3Csvg%20version=%221.1%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Crect%20width=%22100%25%22%20height=%22100%25%22%20fill=%22%23044123%22/%3E%3C/svg%3E' stretch='uniform' target='_self'></ni-url-image>
            <ni-text class='header-text-bg-blue' control-resize-mode='fixed' ni-control-id='5' text='Earthquakes this Month'></ni-text>
            <ni-data-grid class='grid-header-size' alt-row-colors='true' binding-info='{"accessMode": "writeOnly", "dataItem": "dataItem_Earthquakes", "dco": 0, "isLatched": false, "prop": "value", "sync": false, "unplacedOrDisabled": false}' column-header-visible='true' control-resize-mode='fixed' follower-ids='["13"]' label-alignment='top-left' label-id='13' ni-control-id='6' ni-type='{"name": "Array", "rank": 1, "subtype": {"fields": ["Location", "Magnitude", "Latitude", "Longitude", "Depth"], "name": "Cluster", "subtype": ["String", "Double", "Double", "Double", "Double"]}}' read-only='true' row-height='46' value='[]'>
                <ni-data-grid-column field-name='Magnitude' header='Magnitude' index='1' ni-control-id='8' width='125px'>
                    <jqx-numeric-text-box control-resize-mode='fixed' enable-mouse-wheel-action='true' max='Infinity' min='-Infinity' ni-control-id='15' ni-type='Double' radix='decimal' readonly='true' significant-digits='6' spin-buttons-initial-delay='500' spin-buttons-position='right' spin-buttons-step='1' validation='interaction' value='0'></jqx-numeric-text-box>
                </ni-data-grid-column>
                <ni-data-grid-column field-name='Location' header='Location' index='0' ni-control-id='7' width='auto'>
                    <ni-string-control control-resize-mode='fixed' escaped-display-mode='default' ni-control-id='14' read-only='true' text=''></ni-string-control>
                </ni-data-grid-column>
                <ni-data-grid-column field-name='Latitude' header='Latitude' index='2' ni-control-id='9' width='125px'>
                    <jqx-numeric-text-box control-resize-mode='fixed' enable-mouse-wheel-action='true' max='Infinity' min='-Infinity' ni-control-id='16' ni-type='Double' radix='decimal' readonly='true' significant-digits='6' spin-buttons-initial-delay='500' spin-buttons-position='right' spin-buttons-step='1' validation='interaction' value='0'></jqx-numeric-text-box>
                </ni-data-grid-column>
                <ni-data-grid-column field-name='Longitude' header='Longitude' index='3' ni-control-id='10' width='125px'>
                    <jqx-numeric-text-box control-resize-mode='fixed' enable-mouse-wheel-action='true' max='Infinity' min='-Infinity' ni-control-id='17' ni-type='Double' radix='decimal' readonly='true' significant-digits='6' spin-buttons-initial-delay='500' spin-buttons-position='right' spin-buttons-step='1' validation='interaction' value='0'></jqx-numeric-text-box>
                </ni-data-grid-column>
                <ni-data-grid-column field-name='Depth' header='Depth' index='4' ni-control-id='11' width='125px'>
                    <jqx-numeric-text-box control-resize-mode='fixed' enable-mouse-wheel-action='true' max='Infinity' min='-Infinity' ni-control-id='18' ni-type='Double' radix='decimal' readonly='true' significant-digits='6' spin-buttons-initial-delay='500' spin-buttons-position='right' spin-buttons-step='1' validation='interaction' value='0'></jqx-numeric-text-box>
                </ni-data-grid-column>
            </ni-data-grid>
            <ni-label class='ni-hidden' control-resize-mode='fixed' label-alignment='top-left' ni-control-id='13' text='Earthquakes'></ni-label>
            <ni-url-image alternate='USGS' binding-info='{"accessMode": "writeOnly", "dataItem": "dataItem_Logo", "dco": 1, "isLatched": false, "prop": "source", "sync": false, "unplacedOrDisabled": true}' control-resize-mode='fixed' follower-ids='["20"]' href='' label-alignment='top-left' label-id='20' ni-control-id='12' read-only='true' source='https://earthquake.usgs.gov/theme/images/usgs-logo.svg' stretch='uniform' target='_self'></ni-url-image>
            <ni-label class='ni-hidden' control-resize-mode='fixed' label-alignment='top-left' ni-control-id='20' text='logo'></ni-label>
            <ni-url-image alternate='' binding-info='{"accessMode": "writeOnly", "dataItem": "dataItem_MapUrlImage", "dco": 3, "isLatched": false, "prop": "source", "sync": false, "unplacedOrDisabled": false}' control-resize-mode='fixed' follower-ids='["22"]' href='' label-alignment='top-left' label-id='22' ni-control-id='19' read-only='true' source='' stretch='uniform' target='_self'></ni-url-image>
            <ni-label class='ni-hidden' control-resize-mode='fixed' label-alignment='top-left' ni-control-id='22' text='map url image'></ni-label>
            <jqx-numeric-text-box binding-info='{"accessMode": "readOnly", "dataItem": "dataItem_Map", "dco": 2, "isLatched": false, "prop": "value", "sync": false, "unplacedOrDisabled": false}' control-resize-mode='fixed' enable-mouse-wheel-action='true' follower-ids='["24"]' integer-width='int32' label-alignment='top-left' label-id='24' max='2147483647' min='-2147483648' ni-control-id='21' ni-type='Int32' radix='decimal' significant-digits='6' spin-buttons='true' spin-buttons-initial-delay='500' spin-buttons-position='right' spin-buttons-step='1' validation='interaction' value='0'></jqx-numeric-text-box>
            <ni-label class='ni-hidden' control-resize-mode='fixed' label-alignment='top-left' ni-control-id='24' text='Map'></ni-label>
            <ni-text control-resize-mode='fixed' ni-control-id='23' text='Location Index'></ni-text>
            <ni-text control-resize-mode='fixed' ni-control-id='25' text='This example demonstrates how to use a WebVI to call the Earthquake API from the US Geological Survey and display recent earthquakes on a web page.

On the diagram, this WebVI uses HTTP GET to query the Earthquake API for earthquakes from the last 30 days. The WebVI also uses Unflatten from JSON to convert the results from JSON to LabVIEW data.

On the panel, this WebVI displays a summary of the results in a data grid and a map of the selected earthquake region in a URL Image indicator.'></ni-text>
            <ni-hyperlink binding-info='{"accessMode": "readOnly", "dataItem": "dataItem_HyperlinkControl", "dco": 4, "isLatched": false, "prop": "href", "sync": false, "unplacedOrDisabled": true}' content='Learn more about this example at github.com/ni/webvi-examples' control-resize-mode='fixed' follower-ids='["27"]' href='https://github.com/ni/webvi-examples' label-alignment='top-left' label-id='27' ni-control-id='26' target='_self'></ni-hyperlink>
            <ni-label class='ni-hidden' control-resize-mode='fixed' label-alignment='top-left' ni-control-id='27' text='Hyperlink Control'></ni-label>
        </ni-front-panel>
        </div>
    </body>

</html>